@import './reset';
@import './bottomTab';

@function getVw($w) {
  @return calc($w/375) * 100+vw;
}

body {
  background-color: #e9ecf0;
}

.wrap {
  width: getVw(375);
  background-color: #e9ecf0;

  header {
    width: 100%;
    background-color: #fff;

    h2 {
      // width: 100%;
      font-size: getVw(16);
      font-weight: normal;
      text-align: center;
      // margin-left: 50;
      padding: getVw(12) 0;
      color: #555555;
    }
  }

  main {
    width: 100%;

    .banner {
      width: 100%;
      position: relative;

      .imgBox {
        img {
          width: 100%;
          height: getVw(200);
        }
      }

      .login {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: getVw(22);

        p {
          color: #fff;
          font-size: getVw(14);
        }

        button {
          background-color: #fff;
          font-size: getVw(14);
          border: none;
          width: getVw(120);
          height: getVw(30);
          border-radius: getVw(15);
          margin-top: getVw(12);
        }
      }

      .myBook {
        position: absolute;
        width: getVw(365);
        height: getVw(111);
        border-radius: getVw(15);
        background-color: #fff;
        top: getVw(110);
        left: getVw(5);

        .all {
          display: flex;
          justify-content: space-between;
          margin: 0 getVw(15);
          padding-bottom: getVw(8);
          padding-top: getVw(12);

          p {
            font-size: getVw(14);
            color: #555555;
          }
        }

        .cata {
          width: 100%;
          overflow: hidden;
          display: flex;
          box-sizing: border-box;
          justify-content: space-around;
          padding: 0 getVw(15);
          border-top: 1px solid #e9ecf0;
          padding-top: getVw(15);

          li {
            text-align: center;

            i {
              font-size: getVw(17.5);
              color: #555555;
            }

            p {
              font-size: getVw(14);
              color: #555555;
            }
          }
        }
      }
    }

    .column {
      margin-top: getVw(25);
      border-radius: getVw(12);
      background-color: rgb(255, 255, 255);
      margin-left: getVw(5);
      margin-right: getVw(6.5);

      li {
        a {
          display: flex;
          align-items: center;
          padding-top: getVw(10);
          padding-bottom: getVw(11);
          border-bottom: 1px solid #e9ecf0;
          // justify-content: space-between;
          i {
            font-size: getVw(20);
            margin-left: getVw(15);
          }

          p {
            font-size: getVw(16);
            margin-left: getVw(12);
          }

          .i {
            flex-grow: 1;
            text-align: end;
            margin-right: getVw(23);
          }
        }
      }
    }
  }
}

footer {
  width: 100%;
  position: fixed;
  bottom: 0;
  background-color: #fff;

  .btn {
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: getVw(50);
    margin-bottom: getVw(7);
    box-sizing: border-box;
    padding-left: getVw(40);
    padding-right: getVw(40);

    li {
      .icon {
        text-align: center;
        padding-top: getVw(5);

        i {
          font-size: getVw(20);
        }
      }

      p {
        text-align: center;
        font-size: getVw(12);
        padding-top: getVw(7);
      }
    }

    .active {
      .icon {
        i {
          color: #884e22;
        }
      }

      p {
        color: #884e22;
      }
    }
  }
}